<template>
	<view class="page">
		<!-- logo search -->
		<view style="flex-direction: column;display: flex;background-color: #0D3C7D;">
			<image src="@/static/appicon.png" style="height: 40px;width: 150px;" mode="aspectFit"></image>
			<!-- search -->
			<view style="padding: 12px;">
				<input type="text" value="" placeholder="输入关键词搜索"
					style="padding-left: 12px;height: 30px;background-color: #FFFFFF;border-radius: 4px;font-size: 14px;" />
			</view>
		</view>

		<!-- list body -->
		<view
			style="flex: 1;background-color: #F5F5F5;flex-direction: column;position: relative;display: flex;overflow-y: auto;">
			<!-- banner logo -->
			<image src="https://img.zcool.cn/community/011edf56c59cbf32f875520f072926.jpg@2o.jpg"
				style="position: absolute;width: 100%;left: 0;top: 0;height: 230px;z-index: 0;" mode="aspectFill">
			</image>

			<view style="padding:12px;flex: 1; display: flex;flex-direction: column;z-index: 99;padding-top: 160px;">
				<!-- notice -->
				<view style="padding: 12px;padding-bottom: 0;">
					<view
						style="background-color: #FFFFFF;border-radius: 4px;padding: 12px;box-shadow: 0 2px 3px #66666650;">
						<view style="display: flex;align-items: center;padding-left: 10px;">
							<text style="font-size: 13px;font-weight: bold;">四川大学</text>
						</view>
						<view style="">
							<text style="font-size: 14px;font-weight: bold;">《四川大学》什么上课</text>
						</view>
						<text style="font-size: 12px;color: #999999;margin-left: 10px;">地点:四川大学B栋楼13室</text>
					</view>
				</view>
				<!-- 定金连接 -->
				<view style="padding: 12px;margin-bottom: 12px;">
					<view style="background-color: #FFFFFF;border-radius: 4px;padding: 12px;box-shadow: 0 2px 3px #66666650;
					display: flex;flex-direction: row;align-items: center;
					">
						<image src="https://sf3-ttcdn-tos.pstatp.com/obj/labis/6a40c75bf8ff0f3e1292a4d9382530d4" style="width: 64px;height: 64px;" mode="aspectFill"></image>
						<view style="flex: 1;padding-left: 12px;">
							<text style="font-size: 16px;font-weight: bold;display: block;">定金链接</text>
							<text style="
								margin-top: 5px;
								font-size: 12px;color: #999999;display: block;">定金链接定金链接定金链接定金链接定金链接定金链接定金链接定金链接</text>

							<view
								style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 5px;">
								<text style="font-size: 12px;font-weight: bold;color: #FF0000">￥1324.00</text>
								<view style="
								border-radius: 20px;overflow: hidden;
								padding: 5px 12px;display: flex;justify-content: center;align-items: center;background-color: #007AFF;">
									<text style="font-size: 12px;color: #FFFFFF;">立即购买</text>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- school list -->
				<view style="padding: 12px;padding-bottom: 12px;padding-top: 0px;" v-for="(obj,index) in 4">
					<view style="background-color: #FFFFFF;border-radius: 4px;box-shadow: 0 2px 3px #66666650;
					overflow: hidden;position: relative
					">
						<!-- top bg -->
						<view style="position: absolute;height: 200px;left: 0;top: 0;right: 0;">
							<view style="position: relative;height: 200;">
								<image
									src="http://5b0988e595225.cdn.sohucs.com/images/20190628/477eb70347514c57bdbdeb0ec9307b23.jpeg"
									style="width: 100%;height: 200px;position: absolute;left: 0;top: 0;"
									mode="aspectFill"></image>
								<!-- tag -->
								<view style="position: absolute;left: 0;top: 0;display: flex;">
									<view style="padding: 3px 10px;background-color: #ff0000">
										<text style="font-size: 14px;color: #FFFFFF;">线上</text>
									</view>
									<view style="padding: 3px 10px;background-color: #00557f">
										<text style="font-size: 14px;color: #FFFFFF;">冬季</text>
									</view>
								</view>
								<!-- status -->
								<view style="position: absolute;right: 2px;top: 2px;display: flex;">
									<view
										style="padding: 3px 5px;background-color: #ffaa00;display: flex;justify-content: center;align-items: center;">
										<text style="font-size: 12px;color: #FFFFFF;">火热报名中</text>
									</view>
								</view>
							</view>
						</view>

						<!-- body info -->
						<view style="padding-top: 200px;padding-bottom: 12px;padding-left: 12px;padding-right: 12px;">
							<view style="">
								<text style="font-size: 16px;font-weight: bold;display: block;">Hong kong collectge</text>
								<text style="font-size: 14px;color: #007AFF;">广东·香港</text>
							</view>
							<!-- time list -->
							<view style="display: flex;padding-top: 10px;">
								<text style="font-size: 12px;color: #999999;flex: 1;">开始日期</text>
								<text style="font-size: 12px;color: #999999;flex: 1;">时长</text>
							</view>
							<view style="display: flex;padding-top: 5px;" v-for="(obj,idx) in 3">
								<text style="font-size: 12px;color: #333333;flex: 1;">2020/10/01</text>
								<text style="font-size: 12px;color: #333333;flex: 1;">5周</text>
							</view>
							<text
								style="position: absolute;font-size: 12px;color: #007AFF;bottom: 12px;right: 12px;">展开更多</text>
						</view>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
</style>
